<!-- 个人信息 -->
<template>
	<view class="setting">
		<view class="setting-top">
			<view class="u-f-jsb u-f-ac avatar-box" @tap="changeAvater">
				<view class="u-f-ac">
					<view class="avatar round">
						<image :src="userInfo.avatar?userInfo.avatar:'../../../../static/logo.jpg'" class="round" @tap.stop="lookAvater"></image>
					</view>
				</view>
				<view>
					<text class="tip-text">修改头像</text>
					<text class="icon iconfont icon-right"></text>
				</view>
			</view>
		</view>
		<form  @submit="save">
			<view class="radius20 bg-white">
				<view class="u-f-jsb u-f-ac set-li">
					<text>登录账号</text>
					<view>
						<text class="mr8">{{userInfo.memberAccount}}</text>
					</view>
				</view>
				<view class="u-f-jsb u-f-ac set-li">
					<text>个人名称</text>
					<input type="text" placeholder="请输入个人名称" maxlength="25" name="receiverName" placeholder-style="color:#aaa;text-align: right;">
				</view>
				<view class="u-f-jsb u-f-ac set-li">
					<text>邮箱</text>
					<input type="text" placeholder="请输入个人邮箱" maxlength="25" name="email" placeholder-style="color:#aaa;text-align: right;">
				</view>
				<view class="u-f-jsb u-f-ac set-li">
					<text>性别</text>
					<radio-group class="radio-group" @change="radioChange">
						<label class="tui-radio">
							<radio value="0" color="#2ba4f7" />男
						</label>
						
						<label class="tui-radio">
							<radio value="1" color="#2ba4f7" />女
						</label>
					</radio-group>
				</view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="u-f-jsb u-f-ac set-li">
					<text>生日</text>
					<view>
						<text class="tip-text" v-if="userInfo.birthday == null">请设置</text>
						<text v-else>{{userInfo.birthday}}</text>
						<text class="icon iconfont icon-right"></text>
					</view>
				</view>
				</picker>
				<view class="u-f-jsb u-f-ac set-li" @tap="addrmap">
					<text>常住地</text>
					<view>
						<text class="tip-text" v-if="userInfo.address == null">请设置</text>
						<text v-else>{{ userInfo.address }}</text>
						<text class="icon iconfont icon-right"></text>
					</view>
				</view>
				<tui-button :formType="'submit'"  class="btn-fixed" width="650rpx" type="primary" :shadow="true" shape="circle" :size="30">确定</tui-button>
				</view>
		</form>
	</view>
</template>

<script>
	function getDate(type) {
	    const date = new Date();
	    let year = date.getFullYear();
	    let month = date.getMonth() + 1;
	    let day = date.getDate();
	    if (type === 'start') {
	        year = year - 60;
	    } else if (type === 'end') {
	        year = year + 2;
	    }
	    month = month > 9 ? month : '0' + month;;
	    day = day > 9 ? day : '0' + day;
	    return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				date: "",
				startDate:getDate('start'),
				endDate:getDate('end'),
				userInfo:{}
			}
		},
		methods: {
			// 更改头像
			changeAvater() {
				// 获取本地图片
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album', 'camera'],
					success: (res) => {
						// 显示新图片
				    }
				});
			},
			// 设置生日按确定按钮，触发
			bindDateChange: function(e) {
				console.log(e.detail.value)
			},
			// 设置居住地
			addrmap(){
				let that = this
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							// 获取地址接口
							uni.chooseLocation({
								type: 'wgs84',
								geocode: true,
								success: function(res) {
									console.log(res)
									that.address = res.address
								}
							});
				
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 1000
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.setting-top .avatar-box {
    padding: 30rpx 28rpx;
}
.mr8 {
	margin-right: 16rpx;
}
.set-li .icon {
	display: inline!important; 
	width: 1em!important;
}
.set-li text{
	width: 150rpx;
}
.tip-text {
	color: #aaa;
}
.icon-right {
	margin-left: 20rpx;
}
.set-li input{
	flex: 1;
}
</style>
